<template>
  <div class="app-container">
    <el-row>
      <el-col :span="2">
        <label class="row-label">业务操作</label>
      </el-col>
      <el-col :span="22" class="align-right">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-connection"
            @click="handleSyncButton"
          >
            {{ $t('table.sync') }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleInquire"
          >
            {{ $t('table.detailFilter') }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            class="refresh-button"
            @click="handleRefresh"
          >
            {{ $t('table.refresh') }}
          </el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <splitpanes
      class="default-theme"
      horizontal
      :style="{ height: `${commonLayoutHeight}px` }"
    >
      <pane :size="50">
        <client-table
          ref="table"
          v-loading="loading"
          style="height: 100%;"
          :columns="columns"
          :data="rowData"
          show-summary
          @row-click="handleClick"
        />
      </pane>
      <pane :size="50">
        <server-table
          ref="mainTable"
          v-loading="mainLoading"
          style="height: 100%;"
          :columns="mainColumns"
          :row-data="mainData"
          :pagination-page-size="500"
          show-summary
        />
      </pane>
      <pane :size="50">
        <ly-dialog
          v-model="visible"
          :title="$t('route.CilpTable') + '--' +'查询'"
          width="750px"
          top="10vh"
          :modal="true"
          :modal-append-to-body="false"
          :show-confirm-cancel-button="false"
          :before-close="handleCancel"
        >
          <template #operation>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="handleConfirm"
            >
              {{ $t('table.detailFilter') }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-delete"
              class="deleted-button"
              @click="handleClear"
            >
              清空
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-close"
              class="pause-button"
              @click="handleCancel"
            >
              {{ $t('table.cancel') }}
            </el-button>
          </template>
          <ly-form
            ref="form"
            size="mini"
            label-width="80px"
            :model="temp"
            :rules="rules"
          >
            <el-row>
              <el-col>
                <el-form-item
                  label="订单日期"
                  prop="dateOrderRange"
                >
                  <el-date-picker
                    v-model="temp.dateOrderRange"
                    value-format="yyyy-MM-dd"
                    class="search-date-picker"
                    type="daterange"
                    align="center"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="结算方式"
                  prop="settlementName"
                >
                  <el-select
                    v-model="temp.settlementName"
                    clearable
                    placeholder="请选择结算方式"
                    @change="handleChange($event,'settlement')"
                  >
                    <el-option
                      v-for="item in settlementList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="类型"
                  prop="typeName"
                >
                  <el-select
                    v-model="temp.typeName"
                    clearable
                    placeholder="请选择类型"
                    @change="handleChange($event,'type')"
                  >
                    <el-option
                      v-for="item in typeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="进展"
                  prop="progressName"
                >
                  <el-select
                    v-model="temp.progressName"
                    clearable
                    placeholder="请选择进展"
                    @change="handleChange($event,'progress')"
                  >
                    <el-option
                      v-for="item in progressList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </ly-form>
        </ly-dialog>
      </pane></splitpanes></div>
</template>

<script>
import { mapState } from 'vuex'
import { Pane, Splitpanes } from 'splitpanes'
import { getList, updateOne } from '@/api/report'
import { getBasisList } from '@/api/basic-data'
import { getConstantByType } from '@/utils/index'

export default {
  name: 'CilpTable',
  components: {
    Pane,
    Splitpanes
  },
  data() {
    return {
      columns: [
        {
          headerName: '旺旺Id',
          field: 'wangId'
        },
        {
          headerName: '订单日期',
          field: 'orderDate'
        },
        {
          headerName: '进展',
          field: 'progressName'
        },
        {
          headerName: '类型',
          field: 'typeName'
        },
        {
          headerName: '结算方式',
          field: 'settlementName'
        },
        {
          headerName: '派单客服(花名)',
          field: 'customerService'
        },
        {
          headerName: '金额',
          field: 'orderTaking',
          showSummary: true
        }
      ],
      rowData: [],
      mainColumns: [
        {
          headerName: '订单编号',
          field: 'cartonOrderNO'
        },
        {
          headerName: '旺旺Id',
          field: 'wangId'
        },
        {
          headerName: '订单日期',
          field: 'orderDate'
        },
        {
          headerName: '进展',
          field: 'progressName'
        },
        {
          headerName: '类型',
          field: 'typeName'
        },
        {
          headerName: '结算方式',
          field: 'settlementName'
        },
        {
          headerName: '派单客服(花名)',
          field: 'customerService'
        },
        {
          headerName: '金额',
          field: 'orderTaking',
          showSummary: true
        },
        {
          headerName: '修改时间',
          field: 'modifyTime',
          minWidth: 200
        },
        {
          headerName: '创建时间',
          field: 'createDate',
          minWidth: 200
        }
      ],
      mainData: {},
      constants: [],
      temp: {
        dateOrderRange: [],
        beginDate: '',
        endDate: '',
        progressName: '',
        settlementName: '',
        typeName: ''
      },
      resetTemp: {
        dateOrderRange: [],
        beginDate: '',
        endDate: '',
        progressName: '',
        settlementName: '',
        typeName: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 状态
      typeList: [],
      progressList: [],
      settlementList: [],
      orderManageList: [
        {
          name: '审核',
          command: 'check'
        },
        {
          name: '取消审核',
          command: 'uncheck'
        }
      ],
      rules: {
        // dateOrderRange: [{ validator: validate, required: true, message: ' ', trigger: 'change' }]
      },
      timer: null,
      visible: false,
      loading: false,
      mainLoading: false
    }
  },
  computed: {
    ...mapState('app', {
      commonLayoutHeight: state => state.height.clientHeight - 210
    })
  },
  created() {
    this.getPageData()
    this.getConstant()
  },
  methods: {
    handleInquire() {
      this.visible = true
    },
    async handleClick(row) {
      this.mainLoading = true
      const params = {
        typeName: row.typeName
      }
      const result = await getList('getSummaryCilpDetil', params)
      if (result.code === 200) {
        this.mainData = result.data
        setTimeout(() => {
          this.mainLoading = false
          this.$refs.table.setColumnWidth()
        }, 200)
      }
    },
    // 查询
    handleConfirm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.getPageData()
          this.visible = false
        } else {
          this.$alert('有必选项未填', '警告', {
            confirmButtonText: '确定'
          })
          return false
        }
      })
    },
    // 清空
    handleClear() {
      this.temp = Object.assign({}, this.resetTemp)
    },
    // 同步
    handleSyncButton() {
      this.$confirm('是否同步剪辑信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const result = await updateOne('getCilpSync')
        if (result.code === 200) {
          this.$notify({
            title: '成功',
            message: '同步成功',
            type: 'success',
            duration: 2000
          })
          this.getPageData()
        }
      }).catch(() => {
      })
    },
    // 关闭
    handleCancel() {
      this.visible = false
    },
    // 表格数据
    async getPageData() {
      this.loading = true
      const params = Object.assign({}, this.temp)
      if (params.dateOrderRange) {
        params.beginDate = params.dateOrderRange[0]
        params.endDate = params.dateOrderRange[1]
      }
      delete params.dateOrderRange
      const result = await getList('getSummaryCilp', params)
      if (result.code === 200) {
        this.rowData = result.data.pageItems
        setTimeout(() => {
          this.loading = false
          this.$refs.table.setColumnWidth()
          if (this.rowData.length > 0) {
            this.$refs.table.selectRow(this.rowData[0])
            this.$refs.table.redrawRows()
            this.handleClick(this.rowData[0])
          } else {
            this.mainData = {}
          }
        }, 200)
      }
    },
    // 常量
    async getConstant() {
      const result = await getBasisList('constant')
      if (result.code === 200) {
        this.constants = JSON.parse(JSON.stringify(result.data.pageItems))
        this.progressList = await getConstantByType(this.constants, 5)
        const insertIndex = this.progressList.findIndex(item => item.id === '02') + 1
        this.progressList.splice(insertIndex, 0, { id: '04', name: '已接单' }, { id: '05', name: '已完成' })
        this.typeList = await getConstantByType(this.constants, 3)
        this.typeList.push({ id: '04', name: '接单' })
        this.settlementList = await getConstantByType(this.constants, 4)
        this.settlementList.push({ id: '06', name: '接单收入' })
      }
    },
    // 类型
    handleChange(item, val) {
      if (val === 'type') {
        this.temp.typeName = item
      } else if (val === 'progress') {
        this.temp.progressName = item
      } else {
        this.temp.settlementName = item
      }
    },
    // 刷新
    handleRefresh() {
      this.getPageData()
    }
  }
}
</script>

